/**
 * Created by maxiaoqiang on 2018/9/13.
 */
import React, {Component} from "react";

import {formatChar} from "util/MyUtil";

import {Radio, Icon} from 'antd';

const RadioGroup = Radio.Group;
let targetIndex = -100;
class JudgeCheck extends Component {

    constructor(props) {
        super(props);
        this.state = {
            options: [
                {

                    id: -1,
                    name: ""
                },
                {

                    id: -2,
                    name: ""
                }
            ],
            select: ""
        };
    }

    componentDidMount() {
        if (this.props.optionList && this.props.optionList.length > 0) {
            this.setState({
                options: this.props.optionList
            })
        }
        if (this.props.answer) {
            this.setState({
                select: parseInt(this.props.answer)
            })
        }
    }

    addOptionHandle = (e)=> {
        // 阻止冒泡
        e.preventDefault();
        var newOption = this.state.options;
        targetIndex--;
        newOption.push({
            id: targetIndex,
            name: ""
        });
        this.setState({
            options: newOption
        });
    };
    changeHandle = (e)=> {
        this.setState({
            select: e.target.value
        });

        this.props.changeValue("answer", e.target.value);
    };
    changeOptionValueHandle = (id, value)=> {
        let newData = this.state.options;
        for (var i in newData) {
            if (newData[i].id == id) {
                newData[i].name = value
            }
        }
        this.props.changeValue("optionList", newData);
    };

    removeOption = (e, idx)=> {
        // 阻止冒泡
        e.preventDefault();

        var newOption = this.state.options;
        newOption.splice(idx, 1);
        this.setState({
            options: newOption,
            select: ""
        });
        this.props.changeValue("answer", "");
    };

    render() {
        return (
            <div>
                <RadioGroup
                    className="radioGroupStyle"
                    value={this.state.select}
                    onChange={this.changeHandle}
                >
                    {this.state.options ?
                        this.state.options.map((item, idx)=> {
                            return (
                                <Radio
                                    key={idx}
                                    className="radioStyle"
                                    value={idx}
                                >
                                    {formatChar(idx)}:
                                    <input
                                        placeholder="请输入答案描述"
                                        defaultValue={item.name}
                                        onChange={(e)=>{this.changeOptionValueHandle(item.id,e.target.value)}}
                                    />
                                </Radio>
                            )
                        })
                        :
                        null
                    }
                </RadioGroup>
            </div>
        )
    }
}

export default JudgeCheck;